<template>
    <div>
        <el-card style="text-align: center;">
            <el-button type="success" @click="dialogFormVisible = true">添加商品</el-button>
            <el-dialog v-model="dialogFormVisible" title="添加商品">
            <el-form :model="createForm" label-width="100">
                <el-form-item label="商品标题">
                    <el-input v-model="createForm.title" placeholder="title"/>
                </el-form-item>
                <el-form-item label="商品副标题">
                    <el-input v-model="createForm.subtitle" placeholder="subtitle"/>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload v-model:file-list="fileList"
                        :auto-upload="false"
                        :limit="1">
                        <el-button type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="createForm.price" placeholder="price"/>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="createForm.description" placeholder="description"/>
                </el-form-item>
                <el-form-item label="删除状态">
                    <el-input v-model="createForm.deleted" placeholder="description"/>
                </el-form-item>
                <el-form-item label="上架状态">
                    <el-input v-model="createForm.published" placeholder="description"/>
                </el-form-item>
                <el-form-item label="推荐状态">
                    <el-input v-model="createForm.recommended" placeholder="description"/>
                </el-form-item>
                <el-form-item label="分类编号">
                    <el-input v-model="createForm.kid" placeholder="kid"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="create">
                            添加
                    </el-button>
                </span>
            </template>
            </el-dialog>

            <el-dialog v-model="editDialogFormVisible" title="修改商品信息">
                <el-form :model="editForm" label-width="60">
                    <el-form-item label="商品标题">
                        <el-input v-model="editForm.title" placeholder="title"/>
                    </el-form-item>
                    <el-form-item label="商品副标题">
                        <el-input v-model="editForm.subtitle" placeholder="subtitle"/>
                    </el-form-item>
                    <el-form-item label="主图">
                        <el-upload
                            v-model:file-list="editfileList"
                            :auto-upload="false"
                            :limit="1">
                            <el-button type="primary">更改主图</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="editForm.price" placeholder="price"/>
                    </el-form-item>
                    <el-form-item label="商品描述">
                        <el-input v-model="editForm.description" placeholder="description"/>
                    </el-form-item>
                    <el-form-item label="删除状态">
                        <el-input v-model="editForm.deleted" placeholder="description"/>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-input v-model="editForm.published" placeholder="description"/>
                    </el-form-item>
                    <el-form-item label="推荐状态">
                        <el-input v-model="editForm.recommended" placeholder="description"/>
                    </el-form-item>
                    <el-form-item label="分类编号">
                        <el-input v-model="editForm.kid" placeholder="kid"/>
                    </el-form-item>
                </el-form>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="modify">
              保存
            </el-button>
          </span>
                </template>
            </el-dialog>

            <el-input class="in1" v-model="queryForm.account" clearable placeholder="title">
                <template #append>
                    <el-button icon="Search" @click="queryByAccount"></el-button>
                </template>
            </el-input>
            <el-table :data="tableData" border>
                <el-table-column prop="pid" label="ID"/>
                <el-table-column prop="title" label="标题"/>
                <el-table-column prop="subtitle" label="副标题"/>
                <el-table-column prop="picture" label="主图">
                    <template #default="scope">
                        <img :src="`http://127.0.0.1:8081/product/${scope.row.picture}`" alt="" height="30">
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格"/>
                <el-table-column prop="description" label="描述"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="success" size="small" @click="queryById(scope.row.pid)">编辑</el-button>
                        <el-button type="danger" size="small" @click="removeById(scope.row.pid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import axios from 'axios'
import productApi from '../../api/product.js'
import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

onMounted(() => {
    queryAll()
})

let tableData = ref([])
const queryAll = async () => {
    const res = await productApi.queryAll()
    tableData.value = res.data
}

const queryForm = reactive({
    account: ''
})
const queryByAccount = async () => {
    const res = await productApi.queryByAccount({account: queryForm.account})
    tableData.value = res.data
}

const createForm = reactive({
    title: '',
    subtitle: '',
    file: '',
    price: '',
    description: '',
    deleted: '',
    published: '',
    recommended: '',
    kid: ''
})

const dialogFormVisible = ref(false);
const fileList = ref([])
const editfileList = ref([])
// const headers = {'Content-Type': 'multipart/form-data'};
const type = {type: 'application/json'};
const create = async () => {

    createForm.favorites = JSON.stringify(createForm.favorites)
    // 设置上传文件
    createForm.files= fileList
    createForm.file = createForm.files[0].raw // console.log(fileList._rawValue[0].raw)
    // 设置表单数据
    createForm.product = new Blob([JSON.stringify(toRaw(createForm))], type);
    // 隐藏模态框
    dialogFormVisible.value = false

    const res = await productApi.create(createForm)
    if (res.data) {
        ElMessage.success('添加成功');
    } else {
        ElMessage.error('添加失败');
    }
}

const editDialogFormVisible = ref(false)
const editForm = reactive({
    pid:'',
    title: '',
    subtitle: '',
    file: '',
    price: '',
    description: '',
    deleted: '',
    published: '',
    recommended: '',
    kid: ''
})
const editFileList = ref([])
const queryById = async (pid) => {
    const res = await productApi.queryById({pid: pid})
    editForm.pid = res.data.pid
    editForm.title = res.data.title
    editForm.subtitle = res.data.subtitle
    editForm.file = res.data.file
    editForm.price = res.data.price
    editForm.description = res.data.description
    editForm.deleted = res.data.deleted
    editForm.published = res.data.published
    editForm.recommended = res.data.recommended
    editForm.kid = res.data.kid
    editForm.picture = res.data.picture
    editDialogFormVisible.value = true
}
const modify = async () => {
    editForm.files = editFileList
    if (toRaw(editForm.files).length !== 0) {
        editForm.file = editForm.files[0].raw;
    } else {
        editForm.file = null
    }
    console.log(editForm.file)
    editForm.product = new Blob([JSON.stringify(toRaw(editForm))], type);
    editDialogFormVisible.value = false
    const res = await productApi.modify(editForm)
    if (res.data) {
        ElMessage.success('编辑成功')
        queryAll()
    } else {
        ElMessage.error('编辑失败');
    }
}


const removeById = (pid) => {
    ElMessageBox.confirm(
        '确定删除该会员吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        axios.delete('http://127.0.0.1:8080/product/removeById', {data: {pid: pid}}).then(res => {
            console.log(pid)
            if (res.data) {
                ElMessage.success("删除成功")
                queryAll();
            } else {
                ElMessage.error("删除失败")
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}

</script>

<style scoped>
.in1{
    width: 300px;
    margin-left: 680px;
}


</style>